<!DOCTYPE html>
<html lang="en">
	<head>
	
    <title>CBE BPE Toolkit</title>

	<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/anytime/css/anytimec.css"/>
    <link rel="stylesheet" type="text/css" href="/static/jquery-ui/css/smoothness/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" type="text/css" href="/static/pmp/css/plot.css"/>
    <style type="text/css">
      body {
        padding-top: 55px;
        padding-bottom: 30px;
      }
      .sidebar-nav {
        padding: 5px 0;
      }
    </style>
    <script type="text/javascript" src="/static/jquery-1.7.2/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/sessvars/sessvars.js"></script>
    <script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
    <script type="text/javascript" src="/static/anytime/js/anytimec.js"></script>
	<script type="text/javascript" src="/static/anytime/js/anytimetz.js"></script>
	<script src="http://www.openlayers.org/api/2.11/OpenLayers.js" type="text/javascript"></script>
    <script type="text/javascript" src="/static/olwidget/js/olwidget.js"></script>
    <link rel="stylesheet" type="text/css" href="http://openlayers.org/api/2.11/theme/default/style.css">
    <link rel="stylesheet" media="all" type="text/css" href="/static/olwidget/css/olwidget.css">

	
	<script>
		$(document).ready(function(){
			$('#successRecalc').hide()
			$("li#" + window.location.pathname.substring(5, window.location.pathname.length - 1)).addClass("active")
		    $('select#id_name').change(function() { 
	    		projectId = $(this).val();
	    		if (typeof sessvars.sessionObj != 'undefined'){sessvars.sessionObj['projectId'] = projectId;}
	    		else {sessvars.sessionObj={'projectId': projectId}}
				updateDeviceForm(projectId);
	    	})
	    	$('#deviceSummary').click(function (){
				projectId = sessvars.sessionObj.projectId
				var win = window.open('/pmp/utils?projectId=' + projectId + '&utilType=deviceInstanceSummary', 'device', 'height=650,width=700,resizable=yes,scrollbars=yes');
				win.focus();
				return false;       
			})
		  	$('#recalcZones').click(function (){
				var a = window.confirm("This will remove and recalculate zone assignments for all device instances in this project. Only use this feature if you have changed zone layouts after placing device instances. Continue?")
				if (a){
					projectId = sessvars.sessionObj.projectId
					$.ajax({
						type: "GET",
						url: '/pmp/utils/',
						data: {'projectId': projectId, 'utilType': 'recalcZones'},
						success: function(data){
							console.log(data);
							$('#successRecalc').fadeIn().delay(5000).fadeOut(1000);       
						}
					});
				}      
				return false; 
			})
		})
		function updateDeviceForm(projectId){
			$.ajax({
				type: "POST",
				url: '/pmp/deviceInstance/',
				data: {'projectId': projectId, 'select': 'select'},
				success: function(data){
					$('#deviceInstanceForm').html(data)	        
				}
			});
		}
		$.fn.serializeObject = function() {
		  var arrayData, objectData;
		  arrayData = this.serializeArray();
		  objectData = {};
		
		  $.each(arrayData, function() {
		    var value;
		
		    if (this.value != null) {
		      value = this.value;
		    } else {
		      value = '';
		    }
		
		    if (objectData[this.name] != null) {
		      if (!objectData[this.name].push) {
		        objectData[this.name] = [objectData[this.name]];
		      }
		
		      objectData[this.name].push(value);
		    } else {
		      objectData[this.name] = value;
		    }
		  });
		
		  return objectData;
		};
	</script>
  </head>

  <body>
	{% include 'header.html' %}
        <div class="span10" id="mainContent">
        	<h4>Device intialization</h4><br>
        	<p>Use this page to create new devices or start/stop instances of existing devices. Whenever a device moves locations, it requires a new instance.</p>
        	<button id="deviceSummary" class="btn btn-small">Open summary of device instances</button>&nbsp;<button id="recalcZones" class="btn btn-small">Recalculate device instance zone assignments</button><br><br>
        	<span id="successRecalc"><strong>&nbsp;&nbsp;Device instance zone assignments successfully recalculated and saved</strong></span></p>
        	<div id="deviceInstanceForm">
        	 {% include 'deviceInstanceInline.html' %}
	       	</div>
        </div><!--/span10-->
      </div><!--/row-->
      <hr>
	{% include 'footer.html' %}
    </div><!--/.fluid-container-->

<script>
	if (typeof sessvars.sessionObj != 'undefined'){
		for (var i=0;i<document.getElementById('id_name').options.length;i++) {
			if (document.getElementById('id_name').options[i].value == sessvars.sessionObj['projectId'])
			{document.getElementById('id_name').options[i].selected = true;}
		}
	}
	else {sessvars.sessionObj = {'projectId': document.getElementById('id_name').options[0].value}} //set the saved variable to the initial value if undefined
	projectId = sessvars.sessionObj['projectId']
	updateDeviceForm(sessvars.sessionObj['projectId']);
</script>
</body></html>